<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <script type="text/css">
        a{text-decoration: none;}
    </script>
    <script type="text/javascript" src="/jquery.js"></script>
    <#--比较时间查询条件-->
    <script>
        $(function () {
            $("#end").blur(function () {
                var star=$("#star").val();
                var end=$("#end").val();
                if(star>end){
                    alert("起始时间不能大于结束时间,请重新选择!!");
                }
            });
            $("#star").change(function () {
                var star=$("#star").val();
                var end=$("#end").val();
                if(star>=end){
                    alert("请选择结束时间(大于起始时间)!!");
                }
            })
        })

    </script>
</head>
<body>
<div align="center">
    <h1>预约信息列表</h1>
    <#if pageInfo.total!=0>
    <form action="/orders/findAll" method="get">
        <p><button type="button" onclick="location.href='/orders/findAllIns'" style="color: blue;border-color:blue">新增预约</button>

            <span style="color: green">起始时间：</span><input type="date" name="startDate" value="${startDate}" id="star">
            <span style="color: green">结束时间：</span><input type="date" name="endDate" value="${endDate}" id="end">
            <input type="text" name="str" value="${str}" placeholder="请输入姓名的关键字">
            <select name="order_state">
                <option value="-1">--请选择预约状态--</option>
                <#list allStates as sta>
                    <option value="${sta.orderId}" <#if sta.orderId==state>selected</#if> >${sta.orderName}</option>
                </#list>
            </select>
            <button type="submit" id="sub" style="color: green;border-color:green">查询</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" onclick="toExcel()" style="color: cornflowerblue;border-color:cornflowerblue">导出数据</button>

            <button type="button" onclick="dels()" style="color: lightsalmon;border-color:lightsalmon">删除</button>
<#--            <input type="reset" style="color: olive" value="清空查询条件"/>-->
        </p>

    </form>

    <form action="/orders/deleteOrderByProIds" id="delForm" class="toExcel">
        <table border="1" cellspacing="0" width="80%">
            <tr >
                <#--                <th>行下标</th>-->
                <th width="30px;"><input type="checkbox" id="btn1"/></th>
                <th>编号</th>
                <th>头像</th>
                <th>机构名称</th>
                <th>联系人</th>
                <th>预约时间</th>
                <th>操作人</th>
                <th>预约状态</th>
                <th>操作日期</th>
                <th>操作</th>
            </tr>
            <#list pageInfo.list as list>
                <tr <#if (list_index+1)%2==0> style="color: green"</#if>>
                    <#--                    行信息-->
                    <#--                    <th>${list_index+1}</th>-->
                    <th width="50px"><input type="checkbox" name="proId" value="${list.proId}" id="proId" width="40px"/></th>
                    <th>${list.proId}</th>
                    <th width="100px"><img src="${list.pic}" width="100px" height="80px"/></th>
                    <th>${list.insName}</th>
                    <th>${list.userName}</th>
                    <th>
                        ${list.orderDate?date}
                    </th>
                    <th>${list.serverUser}</th>
                    <th>${list.orderState}</th>
                    <th>
                        ${list.handleDate?string('yyyy-MM-dd')}
                    </th>
                    <th>
                        <a href="/orders/findOrderByProId?proId=${list.proId}" style="color:olivedrab ">编辑</a>
                        <#--            异步刷新删除-->
                        <a href="javascript:;" onclick="del(${list.proId},this)" style="color: darkcyan">删除</a>

                        <a href="/orders/seeOrderInfo?proId=${list.proId}" style="color: darkorchid">查看</a>
                    </th>

                </tr>
            </#list>
        </table>
        <#if pageInfo.hasPreviousPage>
            <a href="/orders/findAll?pageIndex=1&str=${str}&order_state=${state}">首页</a>
            <a href="/orders/findAll?pageIndex=${pageInfo.prePage}&str=${str}&order_state=${state}">上一页</a>
        </#if>
        <#if pageInfo.hasNextPage>
            <a href="/orders/findAll?pageIndex=${pageInfo.nextPage}&str=${str}&order_state=${state}">下一页</a>
            <a href="/orders/findAll?pageIndex=${pageInfo.pages}&str=${str}&order_state=${state}">尾页</a>
        </#if>
        当前第${pageInfo.pageNum}页，共${pageInfo.total}条
        </#if>
    </form>

    <#if pageInfo.total==0>
        <form action="/orders/findAll" method="get" id="findAll">
            <p><button type="button" onclick="location.href='/orders/findAllIns'" style="color: blue;border-color:blue">新增预约</button>

                <span style="color: green">起始时间：</span><input type="date" name="startDate" value="${startDate}" >
                <span style="color: green">结束时间：</span><input type="date" name="endDate" value="${endDate}" >
                <input type="text" name="str" value="${str}" placeholder="请输入姓名的关键字" id="str">
                <select name="order_state" >
                    <option value="-1" class="state">--请选择预约状态--</option>
                    <#list allStates as sta>
                        <option value="${sta.orderId}" <#if sta.orderId==state>selected</#if> >${sta.orderName}</option>
                    </#list>
                </select>
                <button type="submit" style="color: blue;border-color:blue" id="sub">查询</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" onclick="toExcel()" style="color: lightsalmon;border-color:cornflowerblue">导出数据</button>

                <button type="button" onclick="dels()" style="color: lightsalmon;border-color:lightsalmon">删除</button>
<#--                <input type="reset" style="color: olive" value="清空查询条件"/>-->
            </p>

        </form>
        <h1>抱歉，暂无数据!!!</h1>
    </#if>
</div>

<script>
    //多选框全选
    $(function(){
        $("#btn1").click(function(){
            //1.得到点击按钮的状态  checked 属于js对象中的属性
            //jquery->js
            var state=$(this)[0].checked;
            // alert(state);
            //2.设置全选，选中的state位true，未选中位false
            var cks=document.getElementsByName("proId");
            for(var i=0;i<cks.length;i++){
                //将子按钮设置和父按钮的状态一样
                cks[i].checked=state;
            }
        });
    });
    function del(proId,obj){
        if(confirm("您确定要删除此项吗？")) {
            $.getJSON(
                "/orders/deleteOrderByProId",
                {proId:proId},
                function (result) {
                    if(result.code==11){
                        // alert(result.msg);//删除成功
                        //parent()->th   parent()->tr
                        //先将js对象转化成jquery对象
                        $(obj).parent().parent().remove(); //该项自动移除
                    }else {
                        alert(result.msg);
                    }
                }
            );
        }
    }

    //批量删除
    function dels() {
        if( confirm("您确定要删除这些信息吗？")) {
            var proId = $("#delForm").serialize();
            alert(proId);
            $.ajax({
                url: "/orders/deleteOrderByProIds",
                data: proId,
                type: "post",
                dataType: "json",
                success: function (rs) {
                    if (rs.code == 55) {
                        //    批量删除成功
                        alert(rs.msg);
                        location.href='/orders/findAll';
                    }else {
                        alert("删除失败");
                        location.href='/orders/findAll';
                    }
                }
            });
        }
    }
    //导出数据
    function toExcel() {
        var proId=$(".toExcel").serialize();
        alert(proId);
        $.ajax({
            url:"/orders/toExcel",
            data:proId,
            type:"post",
            dataType:"json",
            success:function (rs) {
                if(rs.code==666){
                    alert(rs.msg);
                }else {
                    alert("导出文件失败!!")
                    location.href='/orders/findAll';
                }
            }
        });
    };
</script>
</body>
</html>